<template>
	<div class="kpyxcy yuwenPinyiWriteWords">
		<div class="words-item" v-for="(item, index) in props.data" :key="index">
			<template v-for="(w, i) in item" :key="i">
				<Words :text="answetResult(index, item, i)" :print="print" :size="size" :lineGrid="false" :ping-yi="[item[i]]" blank :blank-length="1"  />
			</template>
		</div>
	</div> 
</template>

<script setup>
import { ref } from "vue"
import Words from "@/components/words/index.vue"
import Props from "../props.js"
const props = defineProps({
	...Props,
	size: {
		type: Number,
		default: 10
	}
})
const emit = defineEmits(['answer'])

const isDraw = ref(false)
const toogleDraw = () => isDraw.value = !isDraw.value

const answetResult = (index, item, i) => {
	if(props.result?.[index]?.[i]) {
		return props.result?.[index]?.[i]
	}else{
		return ['']
	}
}
defineExpose({ toogleDraw })
</script>
<style lang="scss" scoped>
.yuwenPinyiWriteWords {
	display: flex;
	flex-wrap: wrap;
	position: relative;
	.words-item {
		margin-bottom: 1.6rem;
		width: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.course-words-list .course-words-box image {
		opacity: 0;
	}
}
</style>
<style lang="scss">
.kpyxcy {
	.course-words-pinyi {
		position: relative;
		top: -0.8rem;
	}
}
</style>